/* Chat interactif — bulles de choix, carte « coup de cœur », pesette, récap.
   Valeurs du guide du créateur (GUIDE-DEV-CHAT.md), composées sur 1920 px
   et multipliées par --u (posé par chat-interactif.js selon l'écran).
   Préfixe .ci- : aucune collision avec les classes existantes du chat. */
:root{--u:1}
.ci-bloc{align-self:stretch;flex-shrink:0;transform-style:preserve-3d;perspective:1500px;margin:calc(4px*var(--u)) 0}
/* bloc passé : en retrait par la transparence (le flou, filter:blur, est retiré) */
.ci-bloc.ci-passe{opacity:.34;pointer-events:none;transition:opacity .5s}
.ci-verre{position:relative;border-radius:var(--r,40px);color:#FFF7EC;text-shadow:0 2px 10px rgba(0,0,0,.6);
  /* sans backdrop-filter (le seul du chat est la barre de saisie) : fond plus dense */
  background:linear-gradient(180deg,rgba(255,222,160,.16) 0%,rgba(210,140,50,.10) 38%,rgba(0,0,0,.30) 100%),rgba(20,12,5,var(--verre-alpha));
  border:1px solid rgba(255,214,140,.28);
  box-shadow:inset 0 1.5px 0 rgba(255,244,214,.85),inset 1.5px 0 0 rgba(255,232,185,.45),inset 0 -1.5px 0 rgba(255,190,100,.45),
    inset 0 0 26px rgba(255,168,62,.34),inset 0 0 6px rgba(255,205,120,.45),0 46px 60px -26px rgba(0,0,0,.75),0 0 46px rgba(226,172,78,.14);
  transform-style:preserve-3d}
/* balayage de brillance : couche .vb (fluidite.js), en transform ; pas de reflets permanents ici */
.ci-verre>.vx{display:none}
.ci-brille>.vb::before{animation:vxBalayageFondu 1.1s cubic-bezier(.65,0,.35,1) forwards}
/* verre « chaud » : ce qui est choisi / actif */
.ci-chaud{background:linear-gradient(180deg,rgba(255,206,120,.34) 0%,rgba(230,150,50,.26) 40%,rgba(60,30,6,.40) 100%),rgba(60,34,8,.52);
  border-color:rgba(255,205,122,.7);box-shadow:inset 0 1.5px 0 rgba(255,244,214,.95),inset 0 0 30px rgba(255,168,62,.6),inset 0 0 8px rgba(255,205,120,.7),0 40px 54px -26px rgba(0,0,0,.75),0 0 60px rgba(250,208,112,.38)}

/* ---------- bulles de choix ---------- */
.ci-choix{display:flex;gap:calc(28px*var(--u));flex-wrap:wrap;align-items:center;transform-style:preserve-3d}
.ci-bulle{--r:999px;font:inherit;cursor:pointer;border:0;min-height:calc(84px*var(--u));padding:0 calc(38px*var(--u));display:grid;place-items:center;
  font-size:max(14px,calc(27px*var(--u)));font-weight:520;transition:opacity .45s cubic-bezier(.215,.61,.355,1),transform .45s cubic-bezier(.215,.61,.355,1)}
.ci-bulle.ci-grande{width:calc(340px*var(--u));min-height:calc(124px*var(--u));font-size:max(18px,calc(40px*var(--u)));font-weight:620;line-height:1.05;text-align:center}
.ci-bulle.ci-grande small{display:block;font-size:max(12px,calc(22px*var(--u)));font-weight:450;color:#DECAA8;margin-top:calc(6px*var(--u))}
.ci-bulle:hover:not(.ci-recul):not(.ci-choisie),.ci-bulle:focus-visible:not(.ci-recul):not(.ci-choisie){transform:translateZ(30px) scale(1.04)}
.ci-bulle:focus-visible,.ci-reco:focus-visible{outline:2px solid #FFCD7A;outline-offset:3px}
.ci-choisie{animation:ciChoix .5s cubic-bezier(.215,.61,.355,1) forwards}
@keyframes ciChoix{0%{transform:scale(1)}50%{transform:scale(1.09) translateZ(24px)}100%{transform:scale(1.03) translateZ(24px)}}
.ci-recul{opacity:.32;transform:translateZ(-90px);pointer-events:none}
.ci-bulle[aria-disabled=true]{opacity:.32;cursor:not-allowed}
.ci-onde{position:absolute;left:50%;top:50%;width:calc(340px*var(--u));height:calc(340px*var(--u));margin:calc(-170px*var(--u));border-radius:50%;pointer-events:none;
  border:2px solid rgba(250,208,112,.8);box-shadow:0 0 28px rgba(250,208,112,.5);animation:ciOnde 1.2s cubic-bezier(.215,.61,.355,1) forwards}
@keyframes ciOnde{from{transform:scale(.12);opacity:.9}to{transform:scale(1.4);opacity:0}}
.ci-bulle-info{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;padding:6px 12px;border-radius:12px;background:rgba(10,6,2,.92);color:#FAD070;pointer-events:none}

/* ---------- carte « coup de cœur » ---------- */
.ci-reco-ligne{display:flex;gap:calc(28px*var(--u));align-items:center;flex-wrap:wrap}
.ci-reco{--r:calc(40px*var(--u));width:calc(500px*var(--u));min-height:calc(200px*var(--u));display:flex;align-items:center;gap:calc(22px*var(--u));
  padding:calc(20px*var(--u)) calc(28px*var(--u));cursor:pointer;border:0;font:inherit;text-align:left;transition:opacity .45s,transform .45s cubic-bezier(.215,.61,.355,1)}
.ci-reco:hover:not(.ci-recul):not(.ci-choisie){transform:translateZ(30px) scale(1.02)}
.ci-reco .ci-photo{width:calc(160px*var(--u));height:calc(160px*var(--u));border-radius:calc(20px*var(--u));overflow:hidden;flex:none;transform:translateZ(22px);
  box-shadow:0 0 0 2px rgba(236,186,92,.75),0 14px 24px rgba(0,0,0,.55);background:#1a1108;display:grid;place-items:center}
.ci-reco .ci-photo img{width:100%;height:100%;object-fit:cover}
.ci-reco .ci-photo b{font-family:'Playfair Display',serif;font-style:italic;font-size:calc(80px*var(--u));color:#E8B84C}
.ci-reco h3{margin:0;font-size:max(17px,calc(38px*var(--u)));font-weight:640;transform:translateZ(34px)}
.ci-reco .ci-spec{font-size:max(12px,calc(21px*var(--u)));color:#DECAA8;margin-top:calc(6px*var(--u));transform:translateZ(28px)}
.ci-reco .ci-prix{margin-top:calc(14px*var(--u));transform:translateZ(46px)}
.ci-pastille{--r:999px;display:inline-grid;place-items:center;min-height:calc(46px*var(--u));padding:0 calc(22px*var(--u));font-size:max(13px,calc(26px*var(--u)));font-weight:700;color:#FAD070}
.ci-badge{position:absolute;left:calc(-14px*var(--u));top:calc(-24px*var(--u));height:calc(44px*var(--u));min-height:26px;padding:0 calc(24px*var(--u)) 0 calc(56px*var(--u));--r:22px;
  display:flex;align-items:center;font-size:max(10px,calc(19px*var(--u)));font-weight:700;letter-spacing:calc(3px*var(--u));color:#FAD070;transform:translateZ(40px) rotateZ(-2deg);white-space:nowrap}
.ci-badge svg{position:absolute;left:calc(20px*var(--u));width:calc(22px*var(--u));height:calc(22px*var(--u))}
.ci-grille4{display:grid;grid-template-columns:repeat(2,calc(310px*var(--u)));gap:calc(18px*var(--u)) calc(16px*var(--u))}
.ci-grille4 .ci-bulle{width:100%;padding:0 calc(14px*var(--u))}

/* ---------- pesette ---------- */
.ci-pesee{position:relative;width:calc(1200px*var(--u));max-width:100%;transform-style:preserve-3d}
.ci-balance{position:relative;width:calc(600px*var(--s,1.25)*var(--u));height:calc(360px*var(--s,1.25)*var(--u))}
.ci-balance-in{position:absolute;left:0;top:0;width:600px;height:360px;transform:scale(calc(var(--s,1.25)*var(--u)));transform-origin:0 0;perspective:1400px;transform-style:preserve-3d}
.ci-rig{position:absolute;inset:0;transform:rotateX(40deg);transform-style:preserve-3d;transform-origin:50% 62%}
.ci-plateau{position:absolute;left:0;top:30px;width:600px;height:290px;--r:46px;
  box-shadow:inset 0 1.5px 0 rgba(255,244,214,.85),inset 0 0 26px rgba(255,168,62,.34),0 1px 0 #D7A24A,0 3px 0 #B98530,0 6px 0 #8F6522,0 9px 0 #6D4C18,0 12px 0 #55390F,0 40px 50px -10px rgba(0,0,0,.8)}
.ci-plateau .ci-nomp{position:absolute;left:46px;top:34px;font-size:17px;letter-spacing:4px;font-weight:620;color:#E2B254;text-transform:uppercase;max-width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ci-ecran{position:absolute;left:130px;top:204px;width:340px;height:70px;border-radius:24px;background:rgba(8,5,2,.88);border:2px solid rgba(226,172,78,.75);
  display:flex;align-items:center;justify-content:flex-end;padding-right:30px;gap:8px;box-shadow:inset 0 0 18px rgba(0,0,0,.8)}
.ci-ecran b{font-size:58px;font-weight:700;color:#FAD070;text-shadow:0 0 18px rgba(255,190,90,.55);font-variant-numeric:tabular-nums;letter-spacing:-1px}
.ci-ecran i{font-style:normal;font-size:36px;font-weight:560;color:#DEBE78;margin-top:8px}
/* éclair du poids affiché : lueur blanche pré-rendue sur l'écran, en opacity
   (avant : color + text-shadow animés) */
/* color-dodge : les chiffres dorés montent au blanc, le fond sombre de l'écran reste sombre */
.ci-ecran::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;
  background:radial-gradient(ellipse 52% 80% at 66% 50%,rgba(255,240,210,.75),rgba(255,220,150,.4) 60%,transparent 85%)}
.ci-ecran.ci-flash::after{animation:ciFlash .5s 3}
@keyframes ciFlash{50%{opacity:1}}
.ci-plat{position:absolute;left:175px;top:-20px;width:250px;height:250px;--r:50%;transform:translateZ(66px)}
.ci-plat .ci-anneau{position:absolute;inset:25px;border-radius:50%;border:1.5px solid rgba(236,190,100,.55)}
.ci-plat .ci-anneau.b{inset:60px;border-color:rgba(236,190,100,.22)}
.ci-tas{position:absolute;inset:0;transform-style:preserve-3d}
.ci-pepite{position:absolute;width:100px;height:100px;margin:-80px 0 0 -50px;transform-origin:50% 80%;transform:translateZ(3px) rotateX(-40deg);pointer-events:none;filter:drop-shadow(0 8px 6px rgba(0,0,0,.55))}
.ci-ombre{position:absolute;width:90px;height:40px;margin:-6px 0 0 -45px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);transform:translateZ(1px)}
.ci-etiquette{position:absolute;left:620px;top:20px;min-height:64px;padding:0 35px;--r:32px;font-size:34px;font-weight:700;color:#FAD070;display:grid;place-items:center;opacity:0;transform:translateZ(60px);white-space:nowrap}
.ci-paliers{display:flex;gap:calc(30px*var(--u));flex-wrap:wrap;margin-top:calc(10px*var(--u));padding-left:calc(30px*var(--u))}
.ci-paliers .ci-bulle{width:calc(180px*var(--u));min-height:calc(96px*var(--u));min-width:64px;padding:0;font-size:max(17px,calc(40px*var(--u)));font-weight:620}

/* ---------- récap ---------- */
.ci-recap{display:flex;flex-wrap:wrap;gap:calc(30px*var(--u));align-items:flex-start;transform-style:preserve-3d}
.ci-minis{display:flex;flex-wrap:wrap;gap:calc(10px*var(--u))}
.ci-mini{position:relative}
.ci-mini .ci-etiquette{left:230px;top:330px;transform:scale(1.35)}
.ci-total{--r:calc(44px*var(--u));width:calc(640px*var(--u));min-width:280px;padding:calc(36px*var(--u)) calc(40px*var(--u))}
.ci-total .ci-k{font-size:max(11px,calc(21px*var(--u)));font-weight:640;letter-spacing:calc(5px*var(--u));color:#E2B254;text-transform:uppercase}
.ci-total .ci-gros{display:flex;justify-content:space-between;align-items:baseline;margin-top:calc(26px*var(--u));font-size:max(40px,calc(104px*var(--u)));font-weight:720;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ci-total .ci-gros small{font-size:.46em;font-weight:560;color:#DEC8A4;letter-spacing:0;margin-left:.15em}
.ci-total .ci-eur{color:#FAD070}
.ci-jauge{margin-top:calc(30px*var(--u));height:max(14px,calc(26px*var(--u)));border-radius:13px;background:rgba(10,6,2,.85);border:2px solid rgba(226,172,78,.45);padding:3px}
.ci-jauge i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#C98C34,#F0BC4E);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.215,.61,.355,1)}
.ci-graduation{display:flex;justify-content:space-between;font-size:max(12px,calc(20px*var(--u)));color:#DECAA8;margin-top:calc(12px*var(--u))}
.ci-mini-badge{display:inline-flex;align-items:center;gap:.5em;margin-top:calc(18px*var(--u));min-height:calc(44px*var(--u));padding:0 calc(24px*var(--u));--r:22px;
  font-size:max(12px,calc(21px*var(--u)));font-weight:640;color:#FAD070;opacity:0}
.ci-mini-badge.ci-manque{color:#F2B59F}
.ci-actions{display:flex;flex-wrap:wrap;gap:calc(18px*var(--u));margin-top:calc(22px*var(--u));width:100%}
.ci-actions .ci-bulle{font-size:max(15px,calc(30px*var(--u)));font-weight:620;min-height:calc(96px*var(--u))}
.ci-pulse{animation:ciPulse 2.4s ease-in-out infinite}
@keyframes ciPulse{50%{transform:translateZ(14px) scale(1.03)}}
/* la lueur de la pulsation : pré-rendue sur .vh, en opacity, au même rythme */
.ci-pulse>.vh{box-shadow:inset 0 1.5px 0 rgba(255,244,214,.95),inset 0 0 30px rgba(255,168,62,.6),0 0 70px rgba(250,208,112,.55);animation:ciPulseHalo 2.4s ease-in-out infinite}
@keyframes ciPulseHalo{50%{opacity:1}}


@media (max-width:759px){
  .ci-choix .ci-bulle:not(.ci-grande){flex:1 1 calc(50% - 10px)}
  .ci-reco{width:100%}
  .ci-grille4{grid-template-columns:1fr 1fr;width:100%}
  .ci-total{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ci-choisie,.ci-onde,.ci-pulse,.ci-pulse>.vh,.ci-brille>.vb::before{animation:none!important}
}
/* l'encart « Commande en cours » faisait doublon avec le récap interactif
   et masquait les bulles en bas à gauche */
body.scene-verre-active .order-summary{display:none!important}
/* 4 pastilles sur téléphone : elles passent à la ligne au lieu de glisser
   sous le bouton d'envoi */
@media (max-width:759px){
  body.scene-verre-active .chatbar .row{align-items:flex-end}
  body.scene-verre-active .chatbar .left{flex-wrap:wrap;row-gap:6px;max-width:calc(100% - 52px)}
}

/* bloc d'où vient le clic : figé (plus cliquable) pendant que son animation finit */
.ci-bloc.ci-fige{pointer-events:none}
/* code promo (KETAMA30) dans le récap */
.ci-promo-ligne{color:#E9C46A;font-weight:600}
.ci-promo-ligne s{color:rgba(242,242,240,.45);font-weight:400;margin-left:6px}
.ci-promo{font-weight:700;letter-spacing:.02em}