/* La démonstration de l'hôte IA, dans la carte du produit.

   Couleurs, dégradés et formes viennent de « Live Conversation Square » du
   canvas. Le carré de la maquette fait 1000 px ; ici il en fait 340 à 520
   selon l'écran. Mettre la maquette à l'échelle rendrait son texte de 15 px
   illisible : les tailles sont donc fluides et bornées (`clamp` sur la
   largeur du conteneur), la composition, elle, ne bouge pas. */

.hia{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,#0a3d40 0%,#14676a 30%,#3f9c93 54%,#e9b678 84%,#f4d3a4 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  font-family:Poppins,system-ui,sans-serif;
  --hia-accent:#c9a227;
  --hia-teal:#0e6b6b;
  --hia-encre:#12262b;
  --hia-t:clamp(9px, 2.85cqw, 14px);      /* le texte courant */
  --hia-pad:clamp(10px, 3.4cqw, 20px);
}

/* les deux halos de la maquette : ils donnent sa profondeur au fond */
.hia::before,
.hia::after{
  content:"";position:absolute;pointer-events:none;border-radius:999px;z-index:0;
}
.hia::before{
  left:-24%;top:12%;width:52%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(125,255,214,.18),transparent);
  animation:hiaDerive 11s ease-in-out infinite;
}
.hia::after{
  right:-26%;top:34%;width:60%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,214,150,.16),transparent);
  animation:hiaDerive 14s ease-in-out 1.5s infinite;
}

.hia-scene{
  position:relative;z-index:1;
  height:100%;display:flex;flex-direction:column;
  padding:0 var(--hia-pad);
  box-sizing:border-box;
}

/* ----------------------------------------------------------- l'en-tête */

.hia-tete{
  flex:none;display:flex;align-items:center;gap:clamp(4px,1.2cqw,8px);
  padding:var(--hia-pad) 0 calc(var(--hia-pad) * .5);
}
.hia-marque{margin-right:auto;line-height:1.15;min-width:0}
.hia-marque-nom{
  font-size:calc(var(--hia-t) * .78);letter-spacing:.2em;font-weight:700;color:#fff;
  white-space:nowrap;
}
.hia-marque-sous{
  font-size:calc(var(--hia-t) * .56);letter-spacing:.28em;
  color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;
}
.hia-pastille{
  flex:none;display:flex;align-items:center;justify-content:center;
  height:calc(var(--hia-t) * 2);padding:0 calc(var(--hia-t) * .7);
  border-radius:999px;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.16);color:#fff;
  font-size:calc(var(--hia-t) * .8);font-weight:600;
}
.hia-rond{width:calc(var(--hia-t) * 2);padding:0}
.hia-panier{
  flex:none;display:flex;align-items:center;gap:calc(var(--hia-t) * .42);
  height:calc(var(--hia-t) * 2);padding:0 calc(var(--hia-t) * .7);
  border-radius:999px;background:var(--hia-accent);color:#fff;
  font-size:calc(var(--hia-t) * .8);font-weight:700;
  box-shadow:0 6px 16px rgba(201,162,39,.45);
}
.hia-compteur{
  min-width:calc(var(--hia-t) * 1.2);height:calc(var(--hia-t) * 1.2);
  padding:0 4px;border-radius:999px;background:#fff;color:#7a5f10;
  font-size:calc(var(--hia-t) * .72);font-weight:800;
  display:none;align-items:center;justify-content:center;
}
.hia-panier-plein .hia-compteur{display:flex;animation:hiaPop .3s ease}

/* -------------------------------------------------------------- l'hôte */

.hia-hote{
  flex:none;display:flex;align-items:center;gap:calc(var(--hia-t) * .85);
  padding-bottom:calc(var(--hia-pad) * .55);
}
.hia-avatar{
  position:relative;flex:none;overflow:hidden;
  width:calc(var(--hia-t) * 3.6);height:calc(var(--hia-t) * 3.6);border-radius:999px;
  background:linear-gradient(155deg,#0c4c50,#2b7f7c 45%,#d9a86f);
  box-shadow:0 12px 30px rgba(6,40,44,.45),0 0 0 2px rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
}
.hia-initiale{
  font-family:'Playfair Display',Georgia,serif;
  font-size:calc(var(--hia-t) * 1.5);color:rgba(255,255,255,.92);
}
.hia-sheen{
  position:absolute;inset:-40%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 62%);
  animation:hiaSheen 5.5s ease-in-out infinite alternate;
}
.hia-anneau{
  position:absolute;inset:0;border-radius:inherit;
  border:2px solid rgba(125,255,178,.85);opacity:0;
}
.hia-parle .hia-anneau{animation:hiaAnneau 1.5s ease-out infinite}

.hia-ident{min-width:0}
.hia-nom{
  font-family:'Playfair Display',Georgia,serif;
  font-size:calc(var(--hia-t) * 1.65);color:#fff;line-height:1.1;
}
.hia-etat{
  display:flex;align-items:center;gap:5px;margin-top:3px;
  font-size:calc(var(--hia-t) * .66);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.hia-point{
  width:5px;height:5px;border-radius:999px;background:rgba(255,255,255,.5);
}
.hia-parle .hia-point{background:#7dffb2;animation:hiaPulse 1.6s ease-in-out infinite}

.hia-ondes{
  margin-left:auto;display:none;align-items:flex-end;gap:3px;
  height:calc(var(--hia-t) * 1.2);
}
.hia-parle .hia-ondes{display:flex}
.hia-ondes span{
  width:3px;border-radius:2px;background:rgba(255,255,255,.92);
  transform-origin:bottom;animation-name:hiaOnde;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}

/* ------------------------------------------------------------- le fil */

.hia-fil{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:calc(var(--hia-t) * .62);
  padding-bottom:calc(var(--hia-t) * .5);
}
.hia-ligne{display:flex;flex:none}
.hia-gauche{justify-content:flex-start;animation:hiaGauche .5s cubic-bezier(.22,1,.36,1) both}
.hia-droite{justify-content:flex-end;animation:hiaDroite .5s cubic-bezier(.22,1,.36,1) both}
.hia-centre{justify-content:center;animation:hiaBadge .5s cubic-bezier(.34,1.56,.64,1) both}
.hia-plats{flex-direction:column;gap:calc(var(--hia-t) * .45)}

.hia-bulle{
  max-width:86%;
  padding:calc(var(--hia-t) * .62) calc(var(--hia-t) * .9);
  font-size:var(--hia-t);line-height:1.45;
  text-wrap:pretty;
}
.hia-bulle-hote{
  border-radius:1.35em 1.35em 1.35em .4em;
  background:rgba(255,255,255,.95);color:var(--hia-encre);
  box-shadow:0 8px 20px rgba(20,60,60,.14);
}
.hia-bulle-client{
  border-radius:1.35em 1.35em .4em 1.35em;
  background:var(--hia-teal);color:#fff;
  box-shadow:0 8px 20px rgba(14,107,107,.32);
}

.hia-points{
  display:flex;gap:4px;
  padding:calc(var(--hia-t) * .72) calc(var(--hia-t) * .9);
  border-radius:1.35em 1.35em 1.35em .4em;
  background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(20,60,60,.14);
}
.hia-points span{
  width:5px;height:5px;border-radius:999px;background:var(--hia-teal);
  animation:hiaPoint 1.1s infinite;
}

/* ------------------------------------------------------------ un plat */

.hia-plat{
  display:flex;gap:calc(var(--hia-t) * .6);align-items:center;
  padding:calc(var(--hia-t) * .5);
  border-radius:1.1em;background:rgba(255,255,255,.97);
  box-shadow:0 10px 26px rgba(20,60,60,.18);
  animation:hiaCarte .55s cubic-bezier(.22,1,.36,1) both;
}
.hia-vignette{
  flex:none;width:calc(var(--hia-t) * 3);height:calc(var(--hia-t) * 3);
  border-radius:.8em;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',Georgia,serif;
  font-size:calc(var(--hia-t) * 1.05);color:rgba(255,255,255,.88);
}
.hia-plat-infos{flex:1;min-width:0}
.hia-plat-nom{
  font-size:calc(var(--hia-t) * .96);font-weight:650;
  color:var(--hia-encre);line-height:1.2;
}
.hia-plat-thai{
  font-size:calc(var(--hia-t) * .84);color:rgba(18,38,43,.6);margin-top:1px;
}
.hia-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:calc(var(--hia-t) * .3)}
.hia-tag{
  padding:2px 6px;border-radius:999px;border:1px solid;
  font-size:calc(var(--hia-t) * .66);font-weight:700;white-space:nowrap;
}
.hia-plat-droite{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:calc(var(--hia-t) * .35);
}
.hia-prix{
  font-size:calc(var(--hia-t) * 1.02);font-weight:750;
  color:var(--hia-teal);white-space:nowrap;
}
.hia-ajouter{
  width:calc(var(--hia-t) * 1.75);height:calc(var(--hia-t) * 1.75);
  border-radius:999px;background:var(--hia-accent);color:#fff;
  font-size:calc(var(--hia-t) * 1.25);font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px rgba(201,162,39,.45);
}

/* --------------------------------------------------- la note d'ajout */

.hia-note{
  padding:calc(var(--hia-t) * .42) calc(var(--hia-t) * .95);
  border-radius:999px;
  background:rgba(201,162,39,.22);border:1px solid rgba(201,162,39,.55);
  color:var(--hia-encre);
  font-size:calc(var(--hia-t) * .8);font-weight:650;text-align:center;
}
.hia-note-envoye{
  background:#166534;border-color:#166534;color:#fff;
  font-size:calc(var(--hia-t) * .88);font-weight:700;
  box-shadow:0 10px 24px rgba(22,101,52,.4);
}

/* --------------------------------------------- suggestions et saisie */

.hia-puces{
  flex:none;display:flex;justify-content:center;gap:5px;
  padding-bottom:calc(var(--hia-t) * .5);overflow:hidden;
}
.hia-puce{
  flex:none;padding:calc(var(--hia-t) * .42) calc(var(--hia-t) * .72);
  border-radius:999px;border:1px solid rgba(201,162,39,.6);
  background:rgba(255,255,255,.84);color:var(--hia-encre);
  font-size:calc(var(--hia-t) * .78);font-weight:600;white-space:nowrap;
}
.hia-puce:nth-child(3){display:none}

.hia-barre{
  flex:none;display:flex;align-items:center;gap:calc(var(--hia-t) * .55);
  padding-bottom:var(--hia-pad);
}
.hia-champ{
  flex:1;min-width:0;display:flex;align-items:center;
  height:calc(var(--hia-t) * 2.9);
  padding:0 calc(var(--hia-t) * .35) 0 calc(var(--hia-t) * 1.1);
  border-radius:999px;background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(20,60,60,.16);
}
.hia-saisie{
  flex:1;min-width:0;font-size:calc(var(--hia-t) * .95);
  color:rgba(18,38,43,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hia-saisie-active{color:var(--hia-encre)}
.hia-curseur{
  display:none;flex:none;width:2px;height:calc(var(--hia-t) * 1.15);
  margin-left:2px;background:var(--hia-teal);
  animation:hiaCurseur 1s step-end infinite;
}
.hia-micro{
  flex:none;width:calc(var(--hia-t) * 2.1);height:calc(var(--hia-t) * 2.1);
  border-radius:999px;background:rgba(18,38,43,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--hia-t) * .85);
}
.hia-envoi{
  flex:none;width:calc(var(--hia-t) * 2.7);height:calc(var(--hia-t) * 2.7);
  border-radius:999px;background:var(--hia-accent);color:#fff;
  font-size:calc(var(--hia-t) * 1.4);font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(201,162,39,.45);
}

/* --------------------------------------------------------- mouvements */

@keyframes hiaDerive{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes hiaSheen{0%{transform:translate(-30%,-10%) rotate(8deg)}100%{transform:translate(30%,10%) rotate(8deg)}}
@keyframes hiaAnneau{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@keyframes hiaPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes hiaOnde{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes hiaPoint{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes hiaPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes hiaCurseur{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hiaGauche{from{opacity:0;transform:translateX(-24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes hiaDroite{from{opacity:0;transform:translateX(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes hiaBadge{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@keyframes hiaCarte{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hia::before,.hia::after,
  .hia-sheen,.hia-anneau,.hia-point,.hia-ondes span,
  .hia-points span,.hia-curseur{animation:none}
  .hia-ligne,.hia-plat{animation:none}
}