/* Cieva — les démonstrations jouées dans les cartes produit.

   Reprises des maquettes « Lyra Live », « Sielo Live » et « Vela Live » du
   canvas Claude Design. Le canvas s'appuie sur React et sur ses propres
   balises ; le site n'a ni l'un ni les autres, les scènes sont donc rejouées
   en JavaScript nu par assets/js/demos.js.

   Un écart assumé, le même pour les trois : la maquette est un carré de
   1000 px qui affiche une quarantaine de blocs, dont du texte de 10 px. La
   carte produit fait 560 px de large et un rapport 3/2. Mettre la maquette à
   l'échelle donnerait du texte de 5 px ; relever le texte sans toucher au
   reste ferait déborder chaque colonne. On garde donc le scénario, les
   couleurs et les moments-clés, et on réduit le nombre de blocs montrés —
   ce qui reste est lisible. Le détail des coupes est dans REPRISE.md. */

.demo{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  font-family:Poppins,system-ui,sans-serif;

  /* toutes les tailles suivent la largeur de la carte, avec un plancher :
     sous ce plancher le texte cesse d'être lisible, autant qu'il déborde
     visiblement plutôt qu'il devienne du gris. */
  --d-t:clamp(9px, 2.1cqw, 12.5px);       /* le texte courant */
  --d-s:clamp(7.5px, 1.75cqw, 10.5px);    /* les mentions secondaires */
  --d-l:clamp(6.5px, 1.5cqw, 9px);        /* les étiquettes en capitales */
  --d-pad:clamp(8px, 2.4cqw, 16px);
  --d-gap:clamp(4px, 1.1cqw, 8px);
  --d-r:clamp(6px, 1.7cqw, 11px);
}

/* le curseur : il vient de la maquette, y compris son onde au clic */
.demo-curseur{
  position:absolute;
  z-index:9;
  pointer-events:none;
  width:clamp(11px, 2.6cqw, 17px);
  transition:transform .12s;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.6));
}
.demo-curseur.clique{transform:scale(.9)}
.demo-onde{
  position:absolute;
  left:50%;top:50%;
  width:clamp(20px, 5cqw, 34px);
  aspect-ratio:1;
  margin:calc(clamp(20px, 5cqw, 34px) / -2) 0 0 calc(clamp(20px, 5cqw, 34px) / -2);
  border-radius:999px;
  border:2px solid currentColor;
  animation:demoOnde .5s ease-out both;
}

@keyframes demoOnde{from{transform:scale(.3);opacity:.6}to{transform:scale(2.4);opacity:0}}
@keyframes demoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes demoDroite{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes demoPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
@keyframes demoBattement{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes demoAnneau{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}
@keyframes demoCurseurTexte{0%,49%{opacity:1}50%,100%{opacity:0}}


/* ============================================================ LYRA
   Le standard qui décroche la nuit. Fond sombre, violet de la marque.
   Coupes par rapport à la maquette : la colonne de navigation, les deux
   blocs de statistiques du bas et le second écran (Agenda) — dans une carte,
   un changement d'écran passe inaperçu. Le rendez-vous posé se lit
   maintenant sur la ligne d'appel elle-même, ce qui dit la même chose. */

.demo-lyra{
  background:#0f0d16;
  border:1px solid rgba(255,255,255,.07);
  color:#f0eef7;
  --vio:#8b5cf6;
  --viol:#a78bfa;
  --vert:#22c55e;
  --vertc:#86efac;
  display:flex;
  flex-direction:column;
}
.demo-lyra .halo{
  position:absolute;
  left:-18%;top:-16%;
  width:64%;aspect-ratio:1;
  border-radius:999px;
  background:radial-gradient(closest-side,rgba(139,92,246,.16),transparent);
  pointer-events:none;
}
.demo-lyra .halo.bas{
  left:auto;top:auto;right:-20%;bottom:-24%;
  width:68%;
  background:radial-gradient(closest-side,rgba(167,139,250,.1),transparent);
}

.demo-lyra .barre{
  flex:none;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.2);
  padding:calc(var(--d-pad) * .6) var(--d-pad);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:2;
}
.demo-lyra .feux{display:flex;gap:calc(var(--d-gap) * .7)}
.demo-lyra .feux i{
  width:clamp(4px,1cqw,7px);aspect-ratio:1;border-radius:999px;background:#3a3548;
}
.demo-lyra .feux i:nth-child(2){background:var(--vio)}
.demo-lyra .feux i:nth-child(3){background:#c4b5fd}
.demo-lyra .titre-barre{
  font-size:var(--d-s);font-weight:600;color:rgba(240,238,247,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-lyra .direct{
  margin-left:auto;display:flex;align-items:center;gap:calc(var(--d-gap) * .8);
  font-size:var(--d-l);color:var(--vertc);white-space:nowrap;
}
.demo-lyra .direct i{
  width:clamp(3px,.7cqw,5px);aspect-ratio:1;border-radius:999px;
  background:var(--vert);animation:demoBattement 1.8s ease-in-out infinite;
}

.demo-lyra .corps{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1.12fr 1fr;
  gap:var(--d-gap);
  padding:var(--d-pad);
  z-index:2;
}
.demo-lyra .colonne{display:flex;flex-direction:column;min-height:0}
.demo-lyra .entete{
  flex:none;display:flex;align-items:baseline;gap:calc(var(--d-gap) * 1.2);
  margin-bottom:var(--d-gap);
}
.demo-lyra .entete h4{
  margin:0;font-size:calc(var(--d-t) * 1.12);font-weight:700;letter-spacing:-.01em;
}
.demo-lyra .compteur{
  margin-left:auto;
  padding:calc(var(--d-gap) * .4) calc(var(--d-gap) * 1.1);
  border-radius:999px;
  background:rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.4);
  color:#c4b5fd;
  font-size:var(--d-l);font-weight:700;white-space:nowrap;
}

.demo-lyra .appels{
  flex:1;min-height:0;
  display:flex;flex-direction:column;gap:calc(var(--d-gap) * .75);
  overflow:hidden;
}
.demo-lyra .appel{
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.1);
  padding:calc(var(--d-gap) * .95) calc(var(--d-gap) * 1.3);
  border-radius:var(--d-r);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  transition:background .3s,border-color .3s;
  animation:demoIn .42s cubic-bezier(.22,1,.36,1) both;
}
.demo-lyra .appel.vise{
  background:rgba(139,92,246,.12);
  border-color:rgba(139,92,246,.5);
}
.demo-lyra .appel .heure{
  flex:none;font-size:var(--d-s);font-weight:700;
  color:rgba(240,238,247,.55);font-variant-numeric:tabular-nums;
}
.demo-lyra .appel .quoi{
  flex:1;min-width:0;font-size:var(--d-s);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-lyra .appel .etat{
  flex:none;
  padding:calc(var(--d-gap) * .35) calc(var(--d-gap) * .95);
  border-radius:999px;
  font-size:var(--d-l);font-weight:700;white-space:nowrap;
  transition:all .3s;
}

.demo-lyra .fiche{
  flex:none;
  padding:calc(var(--d-pad) * .7);
  border-radius:var(--d-r);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .4s;
}
.demo-lyra .fiche.en-ligne{border-color:rgba(34,197,94,.35)}
.demo-lyra .fiche-tete{
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.1);
  font-size:var(--d-l);letter-spacing:.14em;font-weight:700;
  color:rgba(240,238,247,.4);
  white-space:nowrap;overflow:hidden;
}
.demo-lyra .badge-ligne{
  margin-left:auto;display:flex;align-items:center;gap:calc(var(--d-gap) * .6);
  padding:calc(var(--d-gap) * .3) calc(var(--d-gap) * 1);
  border-radius:999px;
  background:rgba(34,197,94,.16);color:var(--vertc);
  font-size:var(--d-l);font-weight:700;letter-spacing:.06em;
}
.demo-lyra .badge-ligne i{
  width:clamp(3px,.7cqw,5px);aspect-ratio:1;border-radius:999px;
  background:var(--vert);animation:demoBattement 1.2s ease-in-out infinite;
}
.demo-lyra .onde-audio{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(1px,.35cqw,3px);
  height:clamp(22px,7cqw,46px);
  margin-top:calc(var(--d-gap) * 1.2);
}
.demo-lyra .onde-audio i{
  width:clamp(2px,.65cqw,4px);
  border-radius:3px;
  background:var(--viol);
  opacity:.6;
}
.demo-lyra .fiche.en-ligne .onde-audio i{background:var(--vertc);opacity:.95}

.demo-lyra .transcription{
  flex:1;min-height:0;
  margin-top:var(--d-gap);
  padding:calc(var(--d-pad) * .7);
  border-radius:var(--d-r);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.demo-lyra .transcription .texte{
  margin-top:calc(var(--d-gap) * 1.1);
  font-size:var(--d-s);line-height:1.5;
  color:rgba(240,238,247,.8);
  text-wrap:pretty;
  overflow:hidden;
}
.demo-lyra .caret{
  display:inline-block;
  width:2px;height:1em;
  margin-left:2px;
  background:var(--viol);
  vertical-align:text-bottom;
  animation:demoCurseurTexte 1s step-end infinite;
}
.demo-lyra .intention{
  margin-top:auto;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.2);
  padding:calc(var(--d-gap) * 1.2);
  border-radius:calc(var(--d-r) * .9);
  background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.4);
  animation:demoPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.demo-lyra .intention i{
  flex:none;
  width:clamp(13px,3cqw,20px);aspect-ratio:1;
  border-radius:999px;
  background:rgba(139,92,246,.3);
  color:#ddd6fe;
  font-size:var(--d-l);font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;
}
.demo-lyra .intention b{display:block;font-size:var(--d-s);font-weight:700;color:#ddd6fe}
.demo-lyra .intention span{
  display:block;margin-top:2px;font-size:var(--d-l);color:rgba(240,238,247,.5);
}

.demo-lyra .sonnerie{
  position:absolute;
  right:var(--d-pad);top:calc(var(--d-pad) * 2.6);
  z-index:8;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.3);
  padding:calc(var(--d-gap) * 1.3) calc(var(--d-gap) * 1.7);
  border-radius:calc(var(--d-r) * 1.1);
  background:rgba(15,13,22,.96);
  border:1px solid rgba(139,92,246,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:demoDroite .4s cubic-bezier(.22,1,.36,1) both;
  max-width:62%;
}
.demo-lyra .sonnerie .rond{
  position:relative;flex:none;
  width:clamp(17px,4cqw,28px);aspect-ratio:1;
  border-radius:999px;
  background:rgba(139,92,246,.24);
  font-size:var(--d-s);
  display:flex;align-items:center;justify-content:center;
}
.demo-lyra .sonnerie .rond::after{
  content:'';position:absolute;inset:0;border-radius:999px;
  border:2px solid rgba(167,139,250,.8);
  animation:demoAnneau 1.2s ease-out infinite;
}
.demo-lyra .sonnerie b{display:block;font-size:var(--d-s);font-weight:700}
.demo-lyra .sonnerie span{
  display:block;margin-top:2px;font-size:var(--d-l);color:rgba(240,238,247,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Sous 700 px la carte devient étroite : la fiche d'appel et la
   transcription se retrouveraient sur deux colonnes de 130 px. On passe la
   scène sur une seule colonne et on ne garde que la partie qui raconte
   l'histoire — la liste des appels et ce que Lyra est en train d'écrire. */
@container (max-width: 380px){
  .demo-lyra .corps{grid-template-columns:1fr}
  .demo-lyra .colonne.droite{display:none}
}


/* ============================================================ SIELO
   Le dispatch. Fond clair, indigo de la marque. Vingt secondes : une
   commande urgente tombe, Sielo propose le camion libre, on confirme, et le
   créneau se pose dans le planning.

   Coupes par rapport à la maquette : la colonne de navigation, le second
   écran (l'inbox), le graphe de tonnage et le bloc d'alertes. Le planning
   est ce qui raconte l'histoire — c'est lui qui prend la place. */

.demo-sielo{
  background:#f6f6f8;
  border:1px solid rgba(255,255,255,.08);
  color:#16161d;
  --ind:#5754d9;
  --vert:#16a34a;
  --rouge:#dc2626;
  --gris:#8b8b98;
  display:flex;
  flex-direction:column;
}

.demo-sielo .barre{
  flex:none;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.3);
  padding:calc(var(--d-pad) * .7) var(--d-pad);
  background:#fff;
  border-bottom:1px solid #e9e9ee;
}
.demo-sielo .logo{
  flex:none;
  width:clamp(15px,3.4cqw,24px);aspect-ratio:1;
  border-radius:calc(var(--d-r) * .7);
  background:var(--ind);color:#fff;
  font-size:var(--d-s);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.demo-sielo .marque{font-size:calc(var(--d-t) * 1.15);font-weight:700;letter-spacing:-.01em}
.demo-sielo .jour{
  margin-left:auto;font-size:var(--d-l);letter-spacing:.12em;
  font-weight:600;color:var(--gris);white-space:nowrap;
}
.demo-sielo .remplissage{
  display:flex;align-items:baseline;gap:calc(var(--d-gap) * .5);
  white-space:nowrap;
}
.demo-sielo .remplissage b{font-size:calc(var(--d-t) * 1.3);font-weight:700;font-variant-numeric:tabular-nums}
.demo-sielo .remplissage span{font-size:var(--d-l);color:var(--gris)}
.demo-sielo .remplissage i{
  font-style:normal;font-size:var(--d-l);font-weight:700;color:var(--vert);
}

.demo-sielo .corps{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1.45fr 1fr;
  gap:var(--d-gap);
  padding:var(--d-pad);
}
.demo-sielo .bloc{
  display:flex;flex-direction:column;min-height:0;
  padding:calc(var(--d-pad) * .8);
  border-radius:var(--d-r);
  background:#fff;
  border:1px solid #ececf1;
}
.demo-sielo .bloc-tete{
  flex:none;display:flex;align-items:center;gap:calc(var(--d-gap) * 1.1);
  font-size:var(--d-t);font-weight:700;
}
.demo-sielo .direct{
  display:flex;align-items:center;gap:calc(var(--d-gap) * .6);
  padding:calc(var(--d-gap) * .3) calc(var(--d-gap) * .9);
  border-radius:999px;
  background:#eaf7ee;color:#16653a;
  font-size:var(--d-l);font-weight:700;white-space:nowrap;
}
.demo-sielo .direct i{
  width:clamp(3px,.7cqw,5px);aspect-ratio:1;border-radius:999px;
  background:var(--vert);animation:demoBattement 1.8s ease-in-out infinite;
}
.demo-sielo .plage{
  margin-left:auto;font-size:var(--d-l);color:var(--gris);white-space:nowrap;
}

.demo-sielo .camions{
  flex:1;min-height:0;
  display:flex;flex-direction:column;gap:calc(var(--d-gap) * .7);
  margin-top:var(--d-gap);
}
.demo-sielo .camion{
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.1);
  padding:calc(var(--d-gap) * .5);
  border-radius:calc(var(--d-r) * .8);
  transition:background .5s;
}
.demo-sielo .camion.vise{background:rgba(22,163,74,.08)}
.demo-sielo .camion .qui{flex:none;width:28%;min-width:0}
.demo-sielo .camion .nom{
  display:flex;align-items:center;gap:calc(var(--d-gap) * .8);
  font-size:var(--d-s);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-sielo .camion .nom i{
  flex:none;width:clamp(3px,.75cqw,6px);aspect-ratio:1;border-radius:999px;
}
.demo-sielo .camion .sous{
  margin-top:2px;font-size:var(--d-l);color:var(--gris);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-sielo .rail{
  flex:1;position:relative;
  height:clamp(14px,3.6cqw,26px);
  border-radius:calc(var(--d-r) * .6);
  background:#f6f6f8;
  border:1px solid #f0f0f4;
}
.demo-sielo .creneau{
  position:absolute;top:2px;bottom:2px;
  border-radius:calc(var(--d-r) * .5);
  display:flex;align-items:center;
  padding:0 calc(var(--d-gap) * .8);
  font-size:var(--d-l);font-weight:600;line-height:1.1;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:#fff;
}

.demo-sielo .colonne{display:flex;flex-direction:column;gap:var(--d-gap);min-height:0}
.demo-sielo .suggestion{
  padding:calc(var(--d-pad) * .8);
  border-radius:var(--d-r);
  background:#fff;border:1px solid #ececf1;
  animation:demoDroite .45s cubic-bezier(.22,1,.36,1) both;
}
.demo-sielo .surtitre{
  display:flex;align-items:center;gap:calc(var(--d-gap) * .8);
  font-size:var(--d-l);letter-spacing:.14em;font-weight:600;color:var(--gris);
}
.demo-sielo .surtitre i{
  width:clamp(3px,.75cqw,6px);aspect-ratio:1;border-radius:999px;background:var(--ind);
}
.demo-sielo .suggestion h5{
  margin:calc(var(--d-gap) * 1.2) 0 0;
  font-size:calc(var(--d-t) * 1.25);font-weight:700;letter-spacing:-.01em;
}
.demo-sielo .suggestion .ou{margin-top:3px;font-size:var(--d-s);color:#6b6b78}
.demo-sielo .raisons{
  margin-top:calc(var(--d-gap) * 1.4);
  display:flex;flex-direction:column;gap:calc(var(--d-gap) * .9);
}
.demo-sielo .raison{
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.1);
  font-size:var(--d-s);color:#3a3a47;
  animation:demoIn .4s cubic-bezier(.22,1,.36,1) both;
}
.demo-sielo .raison i{
  flex:none;width:clamp(9px,2.1cqw,15px);aspect-ratio:1;border-radius:999px;
  background:#eaf7ee;color:#16653a;
  font-size:calc(var(--d-l) * .95);font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;
}
.demo-sielo .valider{
  margin-top:calc(var(--d-gap) * 1.8);
  height:clamp(24px,6cqw,40px);
  border-radius:calc(var(--d-r) * .9);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--d-s);font-weight:600;color:#fff;
  background:var(--ind);
  transition:background .35s,box-shadow .35s;
}
.demo-sielo .valider.fait{background:var(--vert)}

.demo-sielo .capacites{
  flex:1;min-height:0;
  padding:calc(var(--d-pad) * .8);
  border-radius:var(--d-r);
  background:#fff;border:1px solid #ececf1;
  display:flex;flex-direction:column;
}
.demo-sielo .capacite{
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.2);
  margin-top:calc(var(--d-gap) * 1.2);
}
.demo-sielo .capacite .nom2{
  flex:none;width:42%;font-size:var(--d-s);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-sielo .capacite .jauge{
  flex:1;height:clamp(4px,1cqw,7px);border-radius:999px;
  background:#f0f0f4;overflow:hidden;
}
.demo-sielo .capacite .jauge i{
  display:block;height:100%;border-radius:999px;background:var(--ind);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.demo-sielo .capacite .pct{
  flex:none;font-size:var(--d-l);font-weight:600;color:#6b6b78;
  font-variant-numeric:tabular-nums;
}

.demo-sielo .toast{
  position:absolute;
  right:var(--d-pad);top:calc(var(--d-pad) * 3.2);
  z-index:8;max-width:64%;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.3);
  padding:calc(var(--d-gap) * 1.3) calc(var(--d-gap) * 1.6);
  border-radius:calc(var(--d-r) * .9);
  background:#16161d;color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  animation:demoDroite .45s cubic-bezier(.22,1,.36,1) both;
}
.demo-sielo .toast i{
  flex:none;width:clamp(4px,.9cqw,7px);aspect-ratio:1;border-radius:999px;
  background:#f97316;animation:demoBattement 1.4s ease-in-out infinite;
}
.demo-sielo .toast b{display:block;font-size:var(--d-s);font-weight:700}
.demo-sielo .toast span{
  display:block;margin-top:2px;font-size:var(--d-l);color:rgba(255,255,255,.62);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@container (max-width: 380px){
  .demo-sielo .corps{grid-template-columns:1fr}
  .demo-sielo .colonne{display:none}
}


/* ============================================================ VELA
   Les interventions et la facturation. Fond sombre, indigo-violet. Vingt
   secondes : une intervention tombe, les dossiers terminés attendent d'être
   facturés, un clic les facture tous — le solde monte et les statuts
   changent.

   Coupes par rapport à la maquette : la colonne de navigation, le second
   écran (la trésorerie), la projection à 30 jours et l'activité. Le bandeau
   du solde et la liste des interventions portent l'histoire. */

.demo-vela{
  background:#0b0d14;
  border:1px solid rgba(255,255,255,.07);
  color:#f0f0f7;
  --ind:#6366f1;
  --indc:#818cf8;
  --vert:#22c55e;
  --vertc:#86efac;
  display:flex;
  flex-direction:column;
  padding:var(--d-pad);
  gap:var(--d-gap);
}
.demo-vela .halo{
  position:absolute;
  left:-16%;top:-14%;
  width:62%;aspect-ratio:1;border-radius:999px;
  background:radial-gradient(closest-side,rgba(99,102,241,.16),transparent);
  pointer-events:none;
}
.demo-vela .halo.bas{
  left:auto;top:auto;right:-20%;bottom:-22%;width:70%;
  background:radial-gradient(closest-side,rgba(139,92,246,.12),transparent);
}

.demo-vela .bandeau{
  position:relative;flex:none;
  padding:calc(var(--d-pad) * .7) calc(var(--d-pad) * 1.1);
  border-radius:calc(var(--d-r) * 1.2);
  overflow:hidden;
  background:linear-gradient(120deg,#4f46e5 0%,#6d28d9 46%,#3730a3 100%);
  box-shadow:0 18px 44px rgba(67,56,202,.35);
  z-index:2;
}
.demo-vela .bandeau .points{
  position:absolute;inset:0;opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:clamp(9px,2.2cqw,22px) clamp(9px,2.2cqw,22px);
}
.demo-vela .bandeau .courbe{
  position:absolute;right:0;bottom:0;width:52%;height:78%;overflow:visible;
}
.demo-vela .bandeau .dedans{position:relative}
.demo-vela .bandeau .quoi{font-size:var(--d-l);font-weight:500;color:rgba(255,255,255,.72)}
.demo-vela .bandeau .somme{
  margin-top:3px;
  font-size:calc(var(--d-t) * 1.85);font-weight:700;color:#fff;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
}
.demo-vela .bandeau .delta{
  display:inline-block;margin-top:calc(var(--d-gap) * .9);
  padding:calc(var(--d-gap) * .35) calc(var(--d-gap) * 1.1);
  border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;
  font-size:var(--d-l);font-weight:600;
}

.demo-vela .corps{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1.5fr 1fr;
  gap:var(--d-gap);
  z-index:2;
}
.demo-vela .bloc{
  display:flex;flex-direction:column;min-height:0;
  padding:calc(var(--d-pad) * .8);
  border-radius:var(--d-r);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.demo-vela .bloc-tete{
  flex:none;display:flex;align-items:center;gap:calc(var(--d-gap) * 1.1);
  font-size:var(--d-t);font-weight:600;
}
.demo-vela .direct{
  display:flex;align-items:center;gap:calc(var(--d-gap) * .6);
  padding:calc(var(--d-gap) * .3) calc(var(--d-gap) * .9);
  border-radius:999px;
  background:rgba(34,197,94,.14);color:var(--vertc);
  font-size:var(--d-l);font-weight:700;white-space:nowrap;
}
.demo-vela .direct i{
  width:clamp(3px,.7cqw,5px);aspect-ratio:1;border-radius:999px;
  background:var(--vert);animation:demoBattement 1.8s ease-in-out infinite;
}

.demo-vela .jobs{
  flex:1;min-height:0;
  display:flex;flex-direction:column;gap:calc(var(--d-gap) * .7);
  margin-top:var(--d-gap);
  overflow:hidden;
}
.demo-vela .job{
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.2);
  padding:calc(var(--d-gap) * .8) calc(var(--d-gap) * 1.2);
  border-radius:calc(var(--d-r) * .85);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  animation:demoIn .45s cubic-bezier(.22,1,.36,1) both;
}
.demo-vela .job.neuf{
  background:rgba(99,102,241,.09);
  border-color:rgba(99,102,241,.35);
}
.demo-vela .job .initiales{
  flex:none;width:clamp(15px,3.4cqw,25px);aspect-ratio:1;
  border-radius:calc(var(--d-r) * .6);
  font-size:var(--d-l);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.demo-vela .job .quoi{flex:1;min-width:0}
.demo-vela .job .titre{
  font-size:var(--d-s);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-vela .job .ou{
  margin-top:2px;font-size:var(--d-l);color:rgba(240,240,247,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-vela .job .droite{flex:none;text-align:right}
.demo-vela .job .prix{
  font-size:var(--d-s);font-weight:600;font-variant-numeric:tabular-nums;
}
.demo-vela .job .etat{
  display:inline-block;margin-top:3px;
  padding:calc(var(--d-gap) * .25) calc(var(--d-gap) * .9);
  border-radius:999px;
  font-size:var(--d-l);font-weight:700;
  transition:background .35s,color .35s;
}

.demo-vela .facturer{
  flex:none;
  padding:calc(var(--d-pad) * .8);
  border-radius:var(--d-r);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.demo-vela .facturer .quoi{font-size:var(--d-l);color:rgba(240,240,247,.5)}
.demo-vela .facturer .titre{margin-top:3px;font-size:var(--d-s);font-weight:600}
.demo-vela .facturer .chiffres{
  display:flex;align-items:baseline;gap:calc(var(--d-gap) * 1.2);
  margin-top:calc(var(--d-gap) * 1.2);
}
.demo-vela .facturer .n{
  font-size:calc(var(--d-t) * 1.9);font-weight:700;letter-spacing:-.02em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.demo-vela .facturer .mot{font-size:var(--d-l);color:rgba(240,240,247,.45)}
.demo-vela .facturer .somme{
  margin-left:auto;font-size:calc(var(--d-t) * 1.2);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.demo-vela .bouton{
  margin-top:calc(var(--d-gap) * 1.5);
  height:clamp(22px,5.6cqw,38px);
  border-radius:calc(var(--d-r) * .9);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--d-s);font-weight:600;color:#fff;
  background:linear-gradient(140deg,#6366f1,#8b5cf6);
  box-shadow:0 8px 22px rgba(99,102,241,.35);
  transition:all .35s;
}
.demo-vela .bouton.fait{
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.45);
  color:var(--vertc);
  box-shadow:none;
}

.demo-vela .toast{
  position:absolute;
  right:var(--d-pad);top:calc(var(--d-pad) * .8);
  z-index:8;max-width:60%;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.3);
  padding:calc(var(--d-gap) * 1.2) calc(var(--d-gap) * 1.6);
  border-radius:calc(var(--d-r) * .9);
  background:rgba(240,240,247,.97);color:#0b0d14;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  animation:demoDroite .45s cubic-bezier(.22,1,.36,1) both;
}
.demo-vela .toast i{
  flex:none;width:clamp(4px,.9cqw,7px);aspect-ratio:1;border-radius:999px;
  background:var(--ind);animation:demoBattement 1.4s ease-in-out infinite;
}
.demo-vela .toast b{display:block;font-size:var(--d-s);font-weight:700}
.demo-vela .toast span{
  display:block;margin-top:2px;font-size:var(--d-l);color:rgba(11,13,20,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.demo-vela .eclair{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:9;
  display:flex;align-items:center;gap:calc(var(--d-gap) * 1.5);
  padding:calc(var(--d-pad) * .9) calc(var(--d-pad) * 1.3);
  border-radius:calc(var(--d-r) * 1.1);
  background:rgba(11,13,20,.94);
  border:1px solid rgba(99,102,241,.5);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:demoPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.demo-vela .eclair i{
  flex:none;width:clamp(18px,4.2cqw,30px);aspect-ratio:1;border-radius:999px;
  background:rgba(34,197,94,.2);color:var(--vertc);
  font-size:var(--d-t);font-style:normal;
  display:flex;align-items:center;justify-content:center;
}
.demo-vela .eclair b{display:block;font-size:var(--d-t);font-weight:600}
.demo-vela .eclair span{
  display:block;margin-top:3px;font-size:var(--d-s);color:rgba(240,240,247,.5);
}

@container (max-width: 380px){
  .demo-vela .corps{grid-template-columns:1fr}
  .demo-vela .colonne{display:none}
}